<template>
	<view class="shopping_cart_container">
		<view class="shopping_cart_box">
			<view class="cart_banner_box">
				<u-swiper :list="swiperList" height="220"></u-swiper>
			</view>

			<view class="cart_tab_box">
				<view class="cart_tab_all" :class="[isActive == item.id ? 'cart_tab_all_active' : '']"
					v-for="item in tabList" :key="item.id" @click="handleChooseTab(item)">
					{{item.title}}
				</view>
				<!-- 预览图标 -->
				<view class="preview_img_box">
					<image :src="previewIcon" mode="" class="preview_img" @click="handleCheckPreview"></image>
				</view>

			</view>
			<!-- 待加入 -->
			<view class="package_list_box" v-if="isActive == 0">
				<view class="package_list_all" v-for="(item, index) in packageList" :key="index">
					<view class="package_arrow_box">
						<image src="/static/my/shoppingCart/icon-arrow-one.png" mode="" class="package_arrow_img"
							v-if="index == 0"></image>
						<image src="/static/my/shoppingCart/icon-arrow-two.png" mode="" class="package_arrow_img"
							v-else-if="index == 1"></image>
						<image src="/static/my/shoppingCart/icon-arrow-three.png" mode="" class="package_arrow_img"
							v-else-if="index == 2"></image>
					</view>

					<view class="package_title_box">
						<view class="package_title">
							{{item.name}}
						</view>
						<view class="package_status" :style="{'color': item.is_join == 1 ? '#ff5859' : '#2394f4'}">
							{{item.is_join == 1 ? '已加入' : '待加入'}}
						</view>
					</view>

					<view class="package_details_box">
						<view class="details_img_box">
							<image :src="item.cover_img" mode="" class="details_img"></image>
						</view>
						<view class="details_content_box">
							<view class="details_tip">
								{{item.mini_text ? item.mini_text : item.bright}}
							</view>
							<view class="details_number_box">
								<view class="details_number_all">
									<view class="details_number">
										{{item.data_quota}}
									</view>
									<view class="details_name">
										流量额度
									</view>
								</view>

								<view class="details_number_line"></view>

								<view class="details_number_all">
									<view class="details_number">
										{{item.call_duration}}
									</view>
									<view class="details_name">
										通话时长
									</view>
								</view>
							</view>
						</view>
					</view>

					<view class="details_highlights_box">
						<view class="details_highlights">
							{{item.bright}}
						</view>
						<view class="details_btn" @click="handleAddCart(item)">
							加入购物车
						</view>
					</view>
				</view>
			</view>

			<!-- 已加入 -->
			<view class="package_list_already_box" v-else-if="isActive == 1">
				<!-- 上架商品/下架商品 -->
				<view class="product_status_tab_box">
					<view class="product_status_tab_all" v-for="item in productStatusTabList" :key="item.id"
						:class="[isActiveProductStatus == item.id ? 'product_status_tab_all_active' : '']"
						@click="handleChangeStatusTab(item)">
						{{item.title}}
					</view>
				</view>

				<view class="package_list_already_all" v-for="(item, index) in joinedPackageList" :key="index">
					<view class="package_already_arrow_box">
						<image src="/static/my/shoppingCart/icon-arrow-one.png" mode=""
							class="package_already_arrow_img" v-if="index == 0"></image>
						<image src="/static/my/shoppingCart/icon-arrow-two.png" mode=""
							class="package_already_arrow_img" v-else-if="index == 1"></image>
						<image src="/static/my/shoppingCart/icon-arrow-three.png" mode=""
							class="package_already_arrow_img" v-else-if="index == 2"></image>
					</view>

					<view class="package_already_title">
						{{item.name}}
					</view>

					<view class="package_already_details_box">
						<view class="details_already_img_box">
							<image :src="item.cover_img" mode="" class="details_already_img"></image>
						</view>
						<view class="details_already_content_box">
							<view class="details_already_tip">
								{{item.mini_text}}
							</view>
							<view class="details_already_number_box">
								<view class="details_already_number_all">
									<view class="details_already_number">
										{{item.data_quota}}
									</view>
									<view class="details_already_name">
										流量额度
									</view>
								</view>

								<view class="details_already_number_line"></view>

								<view class="details_already_number_all">
									<view class="details_already_number">
										{{item.call_duration}}
									</view>
									<view class="details_already_name">
										通话时长
									</view>
								</view>
							</view>
						</view>
					</view>

					<view class="details_already_highlights_box">
						<view class="details_already_highlights">
							{{item.bright}}
						</view>
						<view class="details_already_btn_box" v-if="isActiveProductStatus == 1">
							<view class="details_already_down" @click="handleDownPackage(item, '0')">
								下架
							</view>
							<!-- <view class="details_already_free">
								免费领取
							</view> -->
							<view class="details_already_sort" @click="handleChangeSort(item)">
								修改排序
							</view>
						</view>
						<view class="details_already_btn_up" v-else-if="isActiveProductStatus == 0">
							<view class="details_already_up" @click="handleUpPackage(item, '1')">
								上架
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 修改排序 -->
			<change-sort ref="refChangeSort" :packageSortNum="packageSortNum" @handleSureSort="handleSureSort"
				@handleCancelSort="handleCancelSort" />
		</view>
	</view>
</template>

<script>
	import ChangeSort from './components/changeSort.vue'
	export default {
		components: {
			ChangeSort
		},
		data() {
			return {
				previewIcon: 'https://file-1314054542.cos.ap-shanghai.myqcloud.com/cos_file/wechat_xcx/6683677a41d40_1719887738.png',
				swiperList: [
					'https://file-1314054542.cos.ap-shanghai.myqcloud.com/cos_file/wechat_xcx/6683621779dfa_1719886359.png',
					'https://file-1314054542.cos.ap-shanghai.myqcloud.com/cos_file/wechat_xcx/66836228adfe0_1719886376.png',
				],
				tabList: [{
						id: 0,
						title: '待加入'
					},
					{
						id: 1,
						title: '已加入'
					},
				],
				isActive: 0,
				packageList: [],
				productStatusTabList: [{
						id: 1,
						title: '上架产品'
					},
					{
						id: 0,
						title: '下架产品'
					},
				],
				isActiveProductStatus: 0,
				queryParams: {
					pageNow: 1,
					pageSize: 100
				},
				total: null,
				joinedPackageList: [], // 已加入购物车列表
				packageSortNum: ''
			}
		},
		onShow() {

		},
		onLoad() {
			// this.packageList = []
			this.programLivePackage()
			// if (this.queryParams.pageNow == this.total) {
			// 	return
			// }
		},
		// onReachBottom() {
		// 	if (this.queryParams.pageNow < this.total) {
		// 		this.queryParams.pageNow++
		// 		if (this.isActive == 0) {
		// 			this.programLivePackage()
		// 		} else {
		// 			this.getShoppingCart()
		// 		}
		// 	} else if (this.queryParams.pageNow == this.total) {
		// 		uni.showToast({
		// 			title: '暂无更多套餐',
		// 			icon: 'none'
		// 		})
		// 		return
		// 	}
		// },
		methods: {
			// 获取购物车套餐列表接口-待加入
			programLivePackage() {
				this.$request('/api/programLivePackage', {
					page_now: this.queryParams.pageNow,
					page_size: this.queryParams.pageSize
				}, 'GET').then(res => {
					if (res.code == 1) {
						// res.data.forEach(item => {
						// 	this.packageList.push(item)
						// })
						this.packageList = res.data
						this.total = res.page_info.page_count

					} else {
						uni.showToast({
							title: '获取列表失败',
							icon: 'none'
						})
						return
					}
				})
			},

			// 添加购物车接口
			addProgramLivePackage(val) {
				let isAgent = uni.getStorageSync('h5-isAgent')
				this.$request('/api/addProgramLivePackage', {
					user_id: uni.getStorageSync('userInfo').id,
					is_agent: isAgent,
					package_id: val.id
				}, 'POST').then(res => {
					uni.hideLoading()
					if (res.code == 1) {
						uni.showToast({
							title: '添加购物车成功',
							icon: 'none',
						})

						// this.queryParams.pageNow = 1
						// this.packageList = []
						this.programLivePackage()
					} else {
						uni.showToast({
							title: '添加购物车失败',
							icon: 'none'
						})
						return
					}
				})
			},

			// 已加入购物车列表接口
			getShoppingCart() {
				let isAgent = uni.getStorageSync('h5-isAgent')
				this.$request('/api/getShoppingCart', {
					user_id: uni.getStorageSync('userInfo').id,
					is_agent: isAgent,
					is_upload: this.isActiveProductStatus,
					page_now: this.queryParams.pageNow,
					page_size: this.queryParams.pageSize
				}, 'GET').then(res => {
					if (res.code == 1) {
						// res.data.forEach(item => {
						// 	this.joinedPackageList.push(item)
						// })

						this.joinedPackageList = res.data
						this.total = res.page_info.page_count
					} else {
						uni.showToast({
							title: '获取已加入套餐失败',
							icon: 'none'
						})
						return
					}
				})
			},

			// 设置上下架
			uploadProgramLivePackage(val, num) {
				this.$request('/api/uploadProgramLivePackage', {
					package_id: val.package_id,
					is_upload: num,
				}, 'POST').then(res => {
					if (res.code == 1) {
						uni.showToast({
							title: `设置${num == 1 ? '上架' : '下架'}成功`,
							icon: 'none'
						})

						// this.queryParams.pageNow = 1
						// this.joinedPackageList = []
						this.getShoppingCart()
					} else {
						uni.showToast({
							title: `设置${num == 1 ? '上架' : '下架'}失败`,
							icon: 'none'
						})
						return
					}
				})
			},

			// 修改排序接口
			weightProgramLivePackage(val) {
				this.$request('/api/weightProgramLivePackage', {
					package_id: this.packageSortNum.package_id,
					weight: Number(val)
				}, 'POST').then(res => {
					if (res.code == 1) {
						uni.showToast({
							title: '修改排序成功',
							icon: 'none'
						})
						this.$refs.refChangeSort.showSort = false
						// this.queryParams.pageNow = 1
						// this.joinedPackageList = []
						this.getShoppingCart()
					} else {
						uni.showToast({
							title: '修改排序失败',
							icon: 'none'
						})
						return
					}
				})
			},

			// 预览
			handleCheckPreview() {
				uni.navigateTo({
					url: '/pages/agentPortion/my/previewPackage/previewPackage'
				})
			},

			// 切换tab
			handleChooseTab(val) {
				this.isActive = val.id
				if (this.isActive == 0) {
					// this.queryParams.pageNow = 1
					// this.packageList = []
					this.programLivePackage()
				} else {
					this.isActiveProductStatus = 1
					// this.queryParams.pageNow = 1
					// this.joinedPackageList = []
					this.getShoppingCart()
				}
			},

			// 切换上下架产品tab
			handleChangeStatusTab(val) {
				this.isActiveProductStatus = val.id
				// this.queryParams.pageNow = 1
				// this.joinedPackageList = []

				this.getShoppingCart()
			},

			// 加入购物车
			handleAddCart(val) {
				uni.showLoading({
					title: '正在加入购物车'
				})

				this.addProgramLivePackage(val)
			},

			// 下架
			handleDownPackage(val, num) {
				const that = this
				uni.showModal({
					title: '设置',
					content: '是否下架该产品',
					success: function(res) {
						if (res.confirm) {
							that.uploadProgramLivePackage(val, num)
						} else if (res.cancel) {

						}
					}
				})
			},

			// 上架
			handleUpPackage(val, num) {
				const that = this
				uni.showModal({
					title: '设置',
					content: '是否上架该产品',
					success: function(res) {
						if (res.confirm) {
							that.uploadProgramLivePackage(val, num)
						} else if (res.cancel) {

						}
					}
				})
			},

			// 修改排序
			handleChangeSort(val) {
				this.packageSortNum = val
				this.$refs.refChangeSort.showSort = true
			},

			// 修改排序确定
			handleSureSort(val) {
				this.weightProgramLivePackage(val)
			},

			// 修改排序取消
			handleCancelSort() {
				// this.$refs.refChangeSort.sortValue = ''
				this.$refs.refChangeSort.showSort = false
			},
		}
	}
</script>

<style lang="scss" scoped>
	.shopping_cart_container {
		padding: 16rpx 16rpx 26rpx;

		.shopping_cart_box {

			.cart_banner_box {
				width: 100%;

				.cart_banner_img {
					width: 100%;
				}
			}

			.cart_tab_box {
				position: relative;
				display: flex;
				padding: 20rpx 0 28rpx;

				.preview_img_box {
					position: absolute;
					top: 0;
					right: 0;

					.preview_img {
						width: 100rpx;
						height: 109rpx;
					}
				}

				.cart_tab_all {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 138rpx;
					height: 56rpx;
					background: #FFFFFF;
					box-shadow: 0px 7rpx 8rpx 0px rgba(224, 224, 224, 0.77);
					border-radius: 28rpx;
					border: 2rpx solid #F5F5F5;
					font-family: all-font;
					font-weight: 500;
					font-size: 28rpx;
					color: #333333;
					margin-right: 23rpx;
				}

				.cart_tab_all_active {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 138rpx;
					height: 56rpx;
					background: linear-gradient(181deg, #5685ED, #4AC2FE);
					box-shadow: 0px 7rpx 8rpx 0px rgba(83, 146, 241, 0.4);
					border-radius: 28rpx;
					font-family: all-font;
					font-weight: 500;
					font-size: 28rpx;
					color: #FFFFFF;
				}
			}

			// 未加入
			.package_list_box {
				padding-top: 20rpx;

				.package_list_all {
					position: relative;
					background: #FFFFFF;
					box-shadow: 0px 14rpx 5rpx 0px rgba(242, 242, 242, 0.39);
					border-radius: 10rpx;
					padding: 27rpx 33rpx 32rpx 24rpx;
					margin-bottom: 32rpx;

					.package_arrow_box {
						position: absolute;
						top: -6rpx;
						right: 0;

						.package_arrow_img {
							width: 100rpx;
							height: 100rpx;
						}
					}

					.package_title_box {
						display: flex;
						align-items: baseline;
						justify-content: space-between;
						font-family: all-font;

						.package_title {
							width: 451rpx;
							font-weight: 500;
							font-size: 32rpx;
							color: #262626;
							margin-bottom: 30rpx;
							display: -webkit-box;
							/* 对于旧版本的 Safari, Chrome, 和 Android 浏览器 */
							-webkit-line-clamp: 1;
							/* 控制显示的行数 */
							-webkit-box-orient: vertical;
							/* 垂直方向布局 */
							overflow: hidden;
							/* 隐藏溢出的内容 */
							text-overflow: ellipsis;
						}

						.package_status {
							font-size: 28rpx;
							color: #ff2123;
							padding-right: 20rpx;
						}
					}



					.package_details_box {
						display: flex;
						align-items: center;
						justify-content: space-between;

						.details_img_box {
							width: 212rpx;
							height: 212rpx;

							.details_img {
								width: 100%;
								height: 100%;
								border-radius: 15rpx;
							}
						}

						.details_content_box {
							width: 405rpx;
							font-family: all-font;

							.details_tip {
								font-weight: 400;
								font-size: 26rpx;
								color: #4D4D4D;
								line-height: 38rpx;
								display: -webkit-box;
								/* 对于旧版本的 Safari, Chrome, 和 Android 浏览器 */
								-webkit-line-clamp: 2;
								/* 控制显示的行数 */
								-webkit-box-orient: vertical;
								/* 垂直方向布局 */
								overflow: hidden;
								/* 隐藏溢出的内容 */
								text-overflow: ellipsis;
							}

							.details_number_box {
								display: flex;
								justify-content: space-evenly;
								align-items: center;
								padding: 20rpx 0 0;

								.details_number_all {
									display: flex;
									flex-direction: column;
									align-items: center;

									.details_number {
										font-family: my-font;
										font-weight: bold;
										font-size: 29rpx;
										color: #262626;
										padding-bottom: 8rpx;
									}

									.details_name {
										font-family: all-font;
										font-weight: 400;
										font-size: 24rpx;
										color: #808080;
									}
								}

								.details_number_line {
									width: 2rpx;
									height: 31rpx;
									background: #E61B15;
									border: 2rpx solid #E6E6E6;
								}
							}
						}
					}

					.details_highlights_box {
						display: flex;
						align-items: center;
						justify-content: space-between;
						font-family: all-font;
						padding-top: 22rpx;

						.details_highlights {
							width: 400rpx;
							font-weight: 400;
							font-size: 26rpx;
							color: #4D4D4D;
							display: -webkit-box;
							/* 对于旧版本的 Safari, Chrome, 和 Android 浏览器 */
							-webkit-line-clamp: 2;
							/* 控制显示的行数 */
							-webkit-box-orient: vertical;
							/* 垂直方向布局 */
							overflow: hidden;
							/* 隐藏溢出的内容 */
							text-overflow: ellipsis;
						}

						.details_btn {
							display: flex;
							justify-content: center;
							align-items: center;
							width: 187rpx;
							height: 57rpx;
							background: linear-gradient(179deg, #FF6D6E, #FF1D1F);
							box-shadow: 0px 9rpx 5rpx 0px rgba(255, 213, 213, 0.64);
							border-radius: 29rpx;
							font-weight: 500;
							font-size: 27rpx;
							color: #FFFFFF;
						}
					}
				}
			}

			// 已加入
			.package_list_already_box {
				padding-top: 20rpx;

				.product_status_tab_box {
					display: flex;
					justify-content: center;

					.product_status_tab_all {
						display: flex;
						justify-content: center;
						align-items: center;
						width: 50%;
						background: #F1F2F4;
						box-shadow: 0px -2rpx 5rpx 0px rgba(220, 220, 220, 0.64);
						border-radius: 12rpx 12rpx 0 0;
						font-family: all-font;
						font-weight: 400;
						font-size: 32rpx;
						color: #333333;
						padding: 25rpx 0;
					}

					.product_status_tab_all_active {
						display: flex;
						justify-content: center;
						align-items: center;
						width: 50%;
						background: linear-gradient(179deg, #C6E4FF, #F9FBFF);
						box-shadow: 0px -2rpx 5rpx 0px rgba(192, 225, 255, 0.64);
						border-radius: 12rpx 12rpx 0 0;
						font-family: all-font;
						font-weight: 400;
						font-size: 32rpx;
						color: #333333;
						padding: 25rpx 0;
					}
				}

				.package_list_already_all {
					position: relative;
					background: #FFFFFF;
					box-shadow: 0px 14rpx 5rpx 0px rgba(242, 242, 242, 0.39);
					border-radius: 10rpx;
					padding: 27rpx 33rpx 32rpx 24rpx;
					margin-bottom: 32rpx;

					.package_already_arrow_box {
						position: absolute;
						top: -6rpx;
						right: 0;

						.package_already_arrow_img {
							width: 100rpx;
							height: 100rpx;
						}
					}

					.package_already_title {
						width: 451rpx;
						font-family: all-font;
						font-weight: 500;
						font-size: 32rpx;
						color: #262626;
						margin-bottom: 30rpx;
						display: -webkit-box;
						/* 对于旧版本的 Safari, Chrome, 和 Android 浏览器 */
						-webkit-line-clamp: 1;
						/* 控制显示的行数 */
						-webkit-box-orient: vertical;
						/* 垂直方向布局 */
						overflow: hidden;
						/* 隐藏溢出的内容 */
						text-overflow: ellipsis;
					}

					.package_already_details_box {
						display: flex;
						align-items: center;
						justify-content: space-between;

						.details_already_img_box {
							width: 212rpx;
							height: 212rpx;

							.details_already_img {
								width: 100%;
								height: 100%;
								border-radius: 15rpx;
							}
						}

						.details_already_content_box {
							width: 405rpx;
							font-family: all-font;

							.details_already_tip {
								font-weight: 400;
								font-size: 26rpx;
								color: #4D4D4D;
								line-height: 38rpx;
								display: -webkit-box;
								/* 对于旧版本的 Safari, Chrome, 和 Android 浏览器 */
								-webkit-line-clamp: 2;
								/* 控制显示的行数 */
								-webkit-box-orient: vertical;
								/* 垂直方向布局 */
								overflow: hidden;
								/* 隐藏溢出的内容 */
								text-overflow: ellipsis;
							}

							.details_already_number_box {
								display: flex;
								justify-content: space-evenly;
								align-items: center;
								padding: 20rpx 0 0;

								.details_already_number_all {
									display: flex;
									flex-direction: column;
									align-items: center;

									.details_already_number {
										font-family: my-font;
										font-weight: bold;
										font-size: 29rpx;
										color: #262626;
										padding-bottom: 8rpx;
									}

									.details_already_name {
										font-family: all-font;
										font-weight: 400;
										font-size: 24rpx;
										color: #808080;
									}
								}

								.details_number_line {
									width: 2rpx;
									height: 31rpx;
									background: #E61B15;
									border: 2rpx solid #E6E6E6;
								}
							}
						}
					}

					.details_already_highlights_box {
						padding-top: 22rpx;

						.details_already_highlights {
							font-family: all-font;
							font-weight: 400;
							font-size: 26rpx;
							color: #4D4D4D;
						}

						.details_already_btn_up {
							display: flex;
							justify-content: center;
							padding-top: 32rpx;

							.details_already_up {
								display: flex;
								justify-content: center;
								align-items: center;
								width: 187rpx;
								height: 57rpx;
								background: linear-gradient(179deg, #FF6D6E, #FF1D1F);
								box-shadow: 0px 9rpx 5rpx 0px rgba(255, 213, 213, 0.64);
								border-radius: 29rpx;
								font-family: all-font;
								font-weight: 500;
								font-size: 27rpx;
								color: #FFFFFF;
							}
						}

						.details_already_btn_box {
							display: flex;
							align-items: center;
							justify-content: space-between;
							padding-top: 33rpx;

							.details_already_down {
								display: flex;
								justify-content: center;
								align-items: center;
								width: 187rpx;
								height: 57rpx;
								background: linear-gradient(179deg, #FF6D6E, #FF1D1F);
								box-shadow: 0px 9rpx 5rpx 0px rgba(255, 213, 213, 0.64);
								border-radius: 29rpx;
								font-family: all-font;
								font-weight: 500;
								font-size: 27rpx;
								color: #FFFFFF;
							}

							.details_already_free {
								display: flex;
								justify-content: center;
								align-items: center;
								width: 187rpx;
								height: 57rpx;
								background: linear-gradient(179deg, #FFC36D, #FF5411);
								box-shadow: 0px 9rpx 5rpx 0px rgba(255, 237, 218, 0.64);
								border-radius: 29rpx;
								font-family: all-font;
								font-weight: 500;
								font-size: 27rpx;
								color: #FFFFFF;
							}

							.details_already_sort {
								display: flex;
								justify-content: center;
								align-items: center;
								width: 187rpx;
								height: 57rpx;
								background: linear-gradient(179deg, #6DD8FF, #1287FF);
								box-shadow: 0px 9rpx 5rpx 0px rgba(176, 230, 255, 0.64);
								border-radius: 29rpx;
								font-family: all-font;
								font-weight: 500;
								font-size: 27rpx;
								color: #FFFFFF;
							}
						}
					}
				}
			}
		}
	}
</style>